<template>
  <div class="line-overview">
    <img
      ref="imgRef"
      src="/src/assets/uiResources/sub.png"
      alt=""
      style="width: 448px; height: 250px"
      id="imgTools"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'

const imgRef = ref(null)
let viewer = null

const toggleFullscreen = () => {
  if (!viewer) {
    viewer = new Viewer(imgRef.value, {
      inline: false,
      navbar: false,
      toolbar: false,
      viewed() {
        viewer.zoomTo(0.1)
      },
    })
  }
  viewer.show()
}

defineExpose({ toggleFullscreen })
</script>

<style>
#image {
  width: 200px;
}
</style>
